<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>我的购物车</title>
  <!-- CSS only -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <!-- JS, Popper.js, and jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script src="index.js"></script>
</head>

<body>
  <div id="root">
    <div class="panel panel-info" style="margin:20px;">
      <!-- 头部 -->
      <div class="panel-heading">
        <h1 style="display: inline-block;">学员管理</h1>
        <span>
          <button type="button" class="btn btn-primary">
            学员总数 <span class="badge badge-light">4</span>
          </button>

        </span>
      </div>
      <!-- 内容 -->
      <div class="panel-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">学号</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  placeholder="请输入学号" id="code">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
              <input type="radio" name="gender" id="man" value="0" class="input-control"> 男
              <input type="radio" name="gender" id="woman" value="1" class="input-control" checked> 女
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  placeholder="请输入姓名" id="name">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="form-group">
                <label for="name">学员状态</label>
                <select class="form-control" id="state">
                  <option value="0">在读</option>
                  <option value="1">休学中</option>
                  <option value="2">已退学</option>
                  <option value="3">已肄业</option>
                  <option value="4">已毕业</option>
                </select>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <input type="button" class="btn btn-danger" id="create" onclick="add()" value="创建"></input>
            </div>
          </div>
        </form>
        <table class="table table-striped">
          <thead>
            <tr>
              <th><input id="checkAll" type="checkbox" class="input-control" onclick="checkAll(this)"></th>
              <th>学号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="tableData">
            <tr>
              <td><input name="ids" type="checkbox" class="input-control" onclick="uncheckAll(this)"></td>
              <td>202590223001</td>
              <td>周杰伦</td>
              <td>男</td>
              <td>在读</td>
              <td>
                <button type="button" class="btn btn-info" onclick="edit(this)">编辑</button>
                <button type="button" class="btn btn-danger" onclick="delOne(this)">删除</button>
              </td>
            </tr>
            <tr>
              <td><input name="ids" type="checkbox" class="input-control" onclick="uncheckAll(this)"></td>
              <td>202590223002</td>
              <td>刘德华</td>
              <td>男</td>
              <td>在读</td>
              <td>
                <button type="button" class="btn btn-info" onclick="edit(this)">编辑</button>
                <button type="button" class="btn btn-danger" onclick="delOne(this)">删除</button>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="6" align="left">
                <button type="button" class="btn btn-danger" onclick="delAll()">批量删除</button>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

  </div>
</body>

</html>